import { Component } from 'react';
import './RunModel.css';

export default class RunModel extends Component {

    state = {
        active: false,
        input_display: 'block',
        par_display: 'block'
    }

    runResult = () => {
        this.setState({ active: true, input_display: 'none' })
    }

    testReadline = () => {
        this.setState({ active: false, input_display: 'block' })
    }

    handleDrag = (e) => {
        const { par_display } = this.state;
        if (e.target.style.transform === 'rotate(90deg)') {
            e.target.style.transform = 'rotate(-90deg)';
        }
        else {
            e.target.style.transform = 'rotate(90deg)';
        }
        this.props.changeHeight();
        if (par_display === 'none') { this.setState({ par_display: 'block' }) }
        else {
            this.setState({ par_display: 'none' })
        }


    }

    render() {
        const { active, input_display, par_display } = this.state;
        return (
            <div className="model-run">
                <div className="code-edit-toolbar">
                    <div className="btn-drag" onClick={this.handleDrag}>《</div>
                    <div className="tab-list">
                        <span className={active ? "tab-item active" : "tab-item"} onClick={this.runResult}>运行结果</span>
                        <span className={active ? "tab-item" : "tab-item active"} onClick={this.testReadline} >自测输入</span>
                    </div>
                    <div className="botton-list">
                        <button className="btn-test">自测运行</button>
                        <button className="btn-sub" onClick={this.props.saveSubmit}>保存并提交</button>
                    </div>

                </div>

                <div className="print-and-readline" style={{ display: par_display }}>
                    <textarea style={{ display: input_display }}></textarea>
                </div>

            </div>
        )
    }
}